﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>HtmlTextBlock Demonstration Page</title>

    <script type="text/javascript">
        function OnLoad() {
            // Handle OnLoad event by updating the examples
            UpdateExamples();
        }

        function UpdateExamples() {
            // Get references to elements
            var silverlightControl = document.getElementById("SilverlightControl");
            var textAreaSampleText = document.getElementById("textAreaSampleText");
            var selectFont = document.getElementById("selectFont");
            var selectSize = document.getElementById("selectSize");
            var htmlSample = document.getElementById("htmlSample");
            // Update Silverlight examples
            silverlightControl.Content.Harness.SetText(textAreaSampleText.value + "", selectFont.value, selectSize.value); // "" works around IE problem
            // Update HTML example
            htmlSample.innerHTML = textAreaSampleText.value;
            htmlSample.style.fontFamily = selectFont.value;
            htmlSample.style.fontSize = selectSize.value + "px";
        }
    </script>

    <style type="text/css">
        body { font-family: Verdana,Arial,Sans-Serif; font-size: 10pt; text-align: center; }
        .title { font-size: 30px; font-weight: bold; font-style: italic; margin-top: 0.5em; margin-bottom: 1.2em; }
        .frame { width:600px; text-align: left; margin-top: 2em; margin-left: auto; margin-right: auto; }
        .label { text-align:left; }
        #silverlightControlHost { width: 600px; height: 287px; margin-left: auto; margin-right: auto; }
        #htmlSample { width: 596px; height: 111px; border-style:solid; border-color:Gray; border-width:1px; padding:1px; overflow:hidden; }
        #textAreaSampleText { width:596px; background-color:#eeeeee; }
        #selectFont { margin-right:15px; }
    </style>

    <script type="text/javascript">
        function onSilverlightError(sender, args) {
            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            }
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            var errMsg = "Unhandled Error in Silverlight 2 Application " +  appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError")
            {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError")
            {
                if (args.lineNumber != 0)
                {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " +  args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>
</head>

<body>

    <p class="title">HtmlTextBlock Demonstration Page</p>

    <div class="frame">

        <!-- Runtime errors from Silverlight will be displayed here.
        This will contain debugging information and should be removed or hidden when debugging is completed -->
        <div id='errorLocation' style="font-size: small;color: Gray;"></div>

        <div id="silverlightControlHost">
            <object id="SilverlightControl" data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
                <param name="source" value="ClientBin/HtmlTextBlock.xap"/>
                <param name="onerror" value="onSilverlightError" />
                <param name="background" value="white" />
                <param name="onload" value="OnLoad" />
                <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
                    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
                </a>
            </object>
            <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
        </div>

        <br />

        <div class="label">As HTML by the browser:</div>
        <div id="htmlSample"></div>

        <br />

        <div class="label">Type your own XHTML here:</div>
        <textarea id="textAreaSampleText" cols="40" rows="6" onchange="UpdateExamples()" onkeyup="UpdateExamples()"
        >Sample text showing how <b>HtmlTextBlock</b> makes it <i>*easy*</i> to display <strong>rich</strong> text in a Silverlight application by using a <em>simple</em> subset of <u>well-formed</u> HTML markup and a custom control.
<p>Experiment by typing <i>your own</i> markup into the text box at the bottom to see how it gets rendered by Silverlight's <b>TextBlock</b>, by the custom <b>HtmlTextBlock</b>, and by the browser.</p>
<p>Note: <b>HtmlTextBlock</b> displays invalid <a href="http://en.wikipedia.org/wiki/Xhtml">XHTML</a> as-is.</p></textarea><br />
        Font:
        <select id="selectFont" onchange="UpdateExamples()">
            <option value="Arial">Arial</option>
            <option value="Arial Black">Arial Black</option>
            <option value="Comic Sans MS">Comic Sans MS</option>
            <option value="Courier New">Courier New</option>
            <option value="Georgia">Georgia</option>
            <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Trebuchet MS">Trebuchet MS</option>
            <option value="Verdana" selected="selected">Verdana</option>
        </select>
        Size:
        <select id="selectSize" onchange="UpdateExamples()">
            <option value="8">8</option>
            <option value="10">10</option>
            <option value="12" selected="selected">12</option>
            <option value="14">14</option>
            <option value="16">16</option>
            <option value="24">24</option>
        </select>

    </div>

</body>
</html>
